// JavaScript Document
var arrOptions = new Array();
var theTextBox;
var currentValueSelected = -1;
var text;

$(document).ready(function(){
	var elemSpan = document.createElement("div");
	elemSpan.id = "spanOutput";
	elemSpan.className = "spanTextDropdown";
	document.body.appendChild(elemSpan);
});

function GiveOptions(event) {
	var intKey = -1;
	if (event.which) {
		intKey = event.which;
		theTextBox = event.target;
	} else {
		if (event.keyCode) {
			intKey = event.keyCode;
			theTextBox = event.srcElement;
		}
	}
	if (theTextBox.value.length == 0) {
		HideTheBox();
		strLastValue = "";
		return false;
	}
	if (intKey == 38) {
		MoveHighlight(-1);
		return false;
	} else {
		if (intKey == 40) {
			MoveHighlight(1);
			return false;
		}else{
			text=theTextBox.value;
		}
	}
	var url = "servlet/Suggest";
	var params = encodeURI(theTextBox.value);
//    alert(params);
    $.post(url,"query=" + params,processResponse);
}


function processResponse(request) {
	var obj = eval("(" + request + ")");
	var action = obj.html;
	arrOptions = action.split(",");
	Bulid(arrOptions);
}

function Bulid(arrOptions) {
	var inner = "";
	for (var i = 0; i < arrOptions.length-1; i++) {
		var a=new Array();
		a=arrOptions[i].split("@");
		inner += "<div style='clear:both;height:20px;length:250px' id=arr_" + i + " class='spanNormalElement' onmouseover='SetHighColor(this)' onclick='SetText()'><div style='float: left; color:black;'>" + a[0] +"</div></div>";
	}
	document.getElementById("spanOutput").innerHTML = inner;
	if(inner!=""){
	    SetElementPosition();
	}
}

function SetElementPosition() {
	var selectedPosX = 0;
	var selectedPosY = 0;
	//var theElement = document.getElementById("searchtext");
	var theElement = theTextBox;
	if (!theElement) {
		return;
	}
	var theElemHeight = theElement.offsetHeight;
	var theElemWidth = theElement.offsetWidth;
	while (theElement != null) {
		selectedPosX += theElement.offsetLeft;
		selectedPosY += theElement.offsetTop;
		theElement = theElement.offsetParent;
	}
	xPosElement = document.getElementById("spanOutput");
	xPosElement.style.left = selectedPosX+"px";
	xPosElement.style.top = selectedPosY + theElemHeight+"px";
	xPosElement.style.width = theElemWidth+"px";
	xPosElement.style.display = "block";
}

function MoveHighlight(xDir) {
	var currnum = currentValueSelected + xDir;
	if (currnum >= 0 && currnum < arrOptions.length-1) {
	    if(currentValueSelected>=0&&currentValueSelected<arrOptions.length-1){
	   		document.getElementById("arr_" + currentValueSelected + "").className = "spanNormalElement";
	   	}
		document.getElementById("arr_" + currnum + "").className = "spanHighElement";
		currentValueSelected = currnum;
		var a = new Array();
	    a = arrOptions[currentValueSelected].split("@");
        theTextBox.value = a[0];
//	    $("input[name=query]").val(a[0]);
	} else {
	    if(currnum==-2){
	        currentValueSelected=arrOptions.length-2;
	        document.getElementById("arr_" + currentValueSelected + "").className = "spanHighElement";
		    var a = new Array();
	        a = arrOptions[currentValueSelected].split("@");
            theTextBox.value = a[0];
//	        $("input[name=query]").val(a[0]);
	    }
	    else{
	   		if(currentValueSelected>=0&&currentValueSelected<arrOptions.length-1){
	   	   		document.getElementById("arr_" + currentValueSelected + "").className = "spanNormalElement";
	     	}
	     	currentValueSelected = -1;
            theTextBox.value = text;
//	    	$("input[name=query]").val(text);
            
	    }
	}
}
function HideTheBox() {
	document.getElementById("spanOutput").style.display = "none";
	currentValueSelected = -1;
}

function ShowTheBox() {
	document.getElementById("spanOutput").style.display = "true";
	currentValueSelected = 1;
}
function SetText() {    
	if(currentValueSelected>=0 && currentValueSelected<arrOptions.length-1){
	   var a = new Array();
	   a = arrOptions[currentValueSelected].split("@");
	   theTextBox.value = a[0];
	   //$("input[name=query]").val(a[0]);
	}
	document.getElementById("spanOutput").style.display = "none";
	currentValueSelected = -1;
//	alert(document.getElementById("query").value);
}
function SetHighColor(theTextBox) {
	if (theTextBox) {
		currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_") + 1, theTextBox.id.length);
	}
	for (var i = 0; i < arrOptions.length-1; i++) {
		document.getElementById("arr_"+i).className = "spanNormalElement";
	}
	theTextBox.className="spanHighElement";
	//document.getElementById("arr_" + currentValueSelected).className = "spanHighElement";
}